import React, { useState, useEffect, useRef } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Progress } from './ui/progress';
import { Input } from './ui/input';
import { MessageCircle, Clock, CheckCircle, Trophy, Star } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { TestResult } from '../types';

interface WordAssociationTestProps {
  onComplete: (result: TestResult) => void;
}

interface WordChain {
  id: number;
  word: string;
  userInput: string;
  points: number;
  timeTaken: number;
  round: number;
  prompt: string;
}

// 扩展的提示词库
const ALL_PROMPT_WORDS = [
  '太阳', '海洋', '森林', '音乐', '友情',
  '梦想', '时间', '书籍', '旅行', '家庭',
  '创意', '自由', '快乐', '希望', '力量',
  '春天', '雨水', '花朵', '星空', '河流',
  '山峰', '风景', '童年', '记忆', '成长',
  '勇气', '智慧', '爱情', '健康', '成功',
  '学习', '工作', '朋友', '老师', '学校',
  '城市', '乡村', '科技', '未来', '传统',
  '艺术', '文化', '运动', '游戏', '电影',
  '美食', '节日', '礼物', '惊喜', '冒险',
  '安静', '热闹', '温暖', '凉爽', '光明',
  '黑暗', '彩虹', '雪花', '月亮', '云朵'
];

// 随机选择5个不重复的提示词
const getRandomPromptWords = (): string[] => {
  const shuffled = [...ALL_PROMPT_WORDS].sort(() => Math.random() - 0.5);
  return shuffled.slice(0, 5);
};

const SCORING_CRITERIA = {
  creative: 10, // 创意词汇
  common: 5,    // 常见词汇
  timeBonus: 5, // 快速回答奖励
  chainBonus: 15 // 连续词链奖励
};

// 扩展的词汇联想关系数据库
const WORD_ASSOCIATIONS: { [key: string]: string[] } = {
  '太阳': ['光明', '温暖', '热量', '白天', '阳光', '太阳能', '日出', '日落', '黄昏', '光线', '能量', '恒星', '火球', '照射', '明亮', '光芒', '炎热', '夏天', '日光', '光辉', '灿烂', '耀眼', '辐射', '发光', '照明', '金色', '圆形', '天空', '宇宙', '行星'],
  '海洋': ['大海', '波浪', '深蓝', '鱼类', '海水', '潮汐', '海岸', '沙滩', '船只', '航海', '海风', '海鸥', '深度', '广阔', '无边', '蓝色', '咸味', '海底', '珊瑚', '贝壳', '游泳', '冲浪', '帆船', '港口', '海洋生物', '鲸鱼', '海豚', '海藻', '海浪声', '浩瀚'],
  '森林': ['树木', '绿色', '叶子', '大树', '植物', '动物', '鸟类', '清新', '氧气', '自然', '生态', '环保', '木材', '森林浴', '徒步', '探险', '野生', '树林', '丛林', '绿荫', '鲜花', '草地', '小径', '阴凉', '宁静', '和谐', '生机', '茂密', '原始', '保护'],
  '音乐': ['旋律', '节奏', '歌曲', '乐器', '演奏', '歌声', '音符', '和声', '美妙', '动听', '情感', '艺术', '创作', '表演', '音响', '耳机', '舞蹈', '音乐会', '古典', '流行', '摇滚', '爵士', '民谣', '电子', '钢琴', '吉他', '小提琴', '鼓声', '歌词', '作曲'],
  '友情': ['朋友', '友谊', '信任', '真诚', '陪伴', '支持', '理解', '分享', '关心', '忠诚', '友好', '互助', '情谊', '知己', '伙伴', '同窗', '默契', '温暖', '珍贵', '永恒', '深厚', '纯真', '快乐', '回忆', '聚会', '交流', '沟通', '包容', '鼓励', '安慰'],
  '梦想': ['理想', '目标', '希望', '追求', '向往', '愿望', '抱负', '志向', '未来', '成功', '努力', '奋斗', '坚持', '实现', '美好', '憧憬', '期待', '信念', '动力', '激情', '创造', '想象', '可能', '机会', '挑战', '成长', '进步', '改变', '突破', '超越'],
  '时间': ['光阴', '岁月', '钟表', '分秒', '过去', '现在', '未来', '历史', '记忆', '瞬间', '永恒', '流逝', '珍贵', '宝贵', '匆忙', '缓慢', '计时', '日历', '年月', '季节', '白天', '黑夜', '早晨', '傍晚', '时钟', '分针', '秒针', '时光', '年华', '青春'],
  '书籍': ['知识', '学习', '阅读', '文字', '故事', '作者', '智慧', '教育', '图书馆', '书店', '文学', '小说', '诗歌', '散文', '纸张', '文化', '思想', '启发', '收获', '成长', '理解', '想象', '情节', '人物', '哲学', '历史', '科学', '经典', '名著', '畅销书'],
  '旅行': ['旅游', '探索', '冒险', '风景', '文化', '体验', '自由', '放松', '发现', '异地', '他乡', '路程', '交通', '酒店', '景点', '拍照', '记录', '回忆', '开阔', '见识', '休假', '度假', '背包', '行李', '机票', '护照', '地图', '导游', '当地', '特色'],
  '家庭': ['亲情', '温暖', '爱心', '父母', '兄弟', '姐妹', '孩子', '亲人', '关爱', '呵护', '团聚', '和睦', '幸福', '安全', '归属', '责任', '传承', '血缘', '亲密', '陪伴', '支持', '理解', '包容', '宽容', '家', '房屋', '住所', '温馨', '快乐', '满足'],
  '创意': ['想象力', '创新', '灵感', '独特', '原创', '设计', '艺术', '发明', '创造', '新颖', '思维', '点子', '构思', '创作', '表达', '突破', '变化', '改进', '优化', '革新', '先锋', '前卫', '现代', '时尚', '个性', '风格', '特色', '魅力', '吸引', '惊喜'],
  '自由': ['解放', '独立', '自主', '选择', '权利', '民主', '平等', '开放', '无拘', '随意', '轻松', '舒适', '自在', '潇洒', '飞翔', '奔跑', '追求', '向往', '渴望', '珍惜', '争取', '维护', '捍卫', '尊重', '理解', '包容', '多元', '宽广', '无限', '可能'],
  '快乐': ['开心', '高兴', '愉快', '欢乐', '喜悦', '幸福', '满足', '兴奋', '激动', '欣喜', '快活', '轻松', '舒畅', '愉悦', '乐观', '积极', '正面', '美好', '温暖', '甜蜜', '笑容', '笑声', '微笑', '欢笑', '庆祝', '派对', '聚会', '分享', '传播', '感染'],
  '希望': ['期待', '盼望', '憧憬', '向往', '渴望', '愿望', '梦想', '理想', '信念', '信心', '乐观', '积极', '未来', '明天', '可能', '机会', '曙光', '光明', '温暖', '力量', '动力', '支撑', '鼓励', '激励', '坚持', '努力', '奋斗', '追求', '实现', '成功'],
  '力量': ['强大', '能量', '威力', '实力', '强壮', '健康', '体力', '精神', '意志', '坚强', '勇气', '勇敢', '无畏', '坚持', '毅力', '决心', '信念', '支撑', '推动', '驱动', '激发', '爆发', '释放', '发挥', '运用', '掌握', '控制', '影响', '改变', '创造'],
  // 新增词汇的联想关系
  '春天': ['温暖', '花朵', '绿色', '生机', '复苏', '阳光', '鸟语', '花香', '嫩芽', '万物', '生长', '美好', '希望', '清新', '活力', '踏青', '郊游', '植树', '播种', '耕种', '雨水', '和风', '柔和', '舒适', '愉悦', '新生', '开始', '更新', '变化', '朝气'],
  '雨水': ['湿润', '清新', '洗涤', '滋润', '生命', '成长', '植物', '大地', '天空', '云朵', '雷声', '闪电', '水滴', '声音', '节奏', '安静', '宁静', '思考', '情感', '浪漫', '诗意', '文艺', '忧郁', '清洁', '净化', '自然', '循环', '季节', '气候', '环境'],
  '花朵': ['美丽', '香味', '颜色', '绽放', '生命', '春天', '自然', '植物', '花园', '蜜蜂', '蝴蝶', '芬芳', '娇艳', '娇嫩', '纯洁', '爱情', '浪漫', '礼物', '装饰', '艺术', '摄影', '绘画', '诗歌', '象征', '寓意', '希望', '美好', '温柔', '优雅', '高贵'],
  '星空': ['夜晚', '黑暗', '光亮', '遥远', '神秘', '宇宙', '无限', '浩瀚', '梦想', '向往', '想象', '科学', '天文', '探索', '发现', '银河', '月亮', '行星', '恒星', '流星', '愿望', '许愿', '浪漫', '诗意', '安静', '宁谧', '深邃', '永恒', '时间', '空间'],
  '河流': ['水', '流动', '清澈', '生命', '源泉', '灌溉', '滋养', '鱼类', '生态', '自然', '风景', '美丽', '宁静', '声音', '流淌', '奔腾', '汇聚', '大海', '循环', '永恒', '时间', '历史', '文明', '城市', '桥梁', '交通', '运输', '诗歌', '文学', '情感'],
  '山峰': ['高耸', '雄伟', '壮观', '挑战', '攀登', '征服', '意志', '坚强', '毅力', '风景', '自然', '云雾', '雪山', '森林', '动物', '植物', '生态', '环境', '保护', '旅游', '探险', '冒险', '摄影', '绘画', '艺术', '灵感', '象征', '力量', '稳定', '永恒'],
  '风景': ['美丽', '自然', '山水', '田园', '城市', '海滨', '森林', '草原', '湖泊', '河流', '瀑布', '花园', '公园', '建筑', '古迹', '文化', '历史', '艺术', '摄影', '绘画', '旅游', '观光', '休闲', '放松', '享受', '体验', '记忆', '回忆', '美好', '震撼'],
  '童年': ['天真', '纯真', '快乐', '无忧', '游戏', '玩具', '朋友', '学校', '老师', '父母', '家庭', '成长', '学习', '发现', '探索', '好奇', '想象', '梦想', '回忆', '美好', '珍贵', '时光', '岁月', '青春', '成熟', '变化', '经历', '教育', '培养', '塑造'],
  '记忆': ['回忆', '过去', '经历', '体验', '印象', '深刻', '模糊', '清晰', '珍贵', '美好', '痛苦', '快乐', '情感', '思念', '怀念', '留恋', '时间', '岁月', '历史', '文化', '传承', '保存', '记录', '日记', '照片', '视频', '故事', '分享', '交流', '沟通'],
  '成长': ['变化', '发展', '进步', '学习', '经历', '体验', '挑战', '困难', '克服', '努力', '奋斗', '坚持', '成熟', '理解', '智慧', '能力', '技能', '知识', '教育', '培养', '引导', '帮助', '支持', '鼓励', '陪伴', '时间', '过程', '阶段', '里程碑', '成就'],
  '勇气': ['勇敢', '无畏', '坚强', '坚定', '决心', '意志', '胆量', '魄力', '冒险', '挑战', '面对', '克服', '战胜', '征服', '突破', '超越', '改变', '成长', '进步', '成功', '实现', '梦想', '目标', '希望', '信念', '信心', '力量', '能量', '激励', '鼓舞'],
  '智慧': ['知识', '经验', '理解', '洞察', '判断', '思考', '分析', '解决', '创新', '创造', '发明', '发现', '学习', '教育', '文化', '哲学', '科学', '艺术', '文学', '历史', '传统', '传承', '积累', '沉淀', '升华', '启发', '指导', '帮助', '成长', '成熟'],
  '爱情': ['甜蜜', '浪漫', '温馨', '幸福', '快乐', '满足', '陪伴', '关爱', '呵护', '理解', '包容', '信任', '忠诚', '专一', '真诚', '深情', '热情', '激情', '思念', '牵挂', '关心', '担心', '保护', '支持', '鼓励', '共同', '未来', '永恒', '承诺', '誓言'],
  '健康': ['身体', '强壮', '活力', '精神', '心理', '平衡', '和谐', '运动', '锻炼', '饮食', '营养', '休息', '睡眠', '放松', '减压', '快乐', '乐观', '积极', '生活', '习惯', '规律', '医疗', '保健', '预防', '治疗', '康复', '长寿', '活力', '青春', '美丽'],
  '成功': ['成就', '胜利', '实现', '达成', '完成', '目标', '梦想', '理想', '努力', '奋斗', '坚持', '毅力', '决心', '意志', '能力', '才华', '智慧', '机会', '运气', '帮助', '支持', '团队', '合作', '领导', '管理', '策略', '方法', '经验', '积累', '成长'],
  '学习': ['知识', '技能', '能力', '成长', '进步', '发展', '教育', '学校', '老师', '学生', '课堂', '书本', '阅读', '思考', '理解', '记忆', '练习', '实践', '应用', '考试', '成绩', '评价', '反馈', '改进', '提高', '完善', '专业', '兴趣', '爱好', '终身'],
  '工作': ['职业', '事业', '责任', '义务', '任务', '目标', '成就', '成功', '进步', '发展', '晋升', '收入', '薪水', '同事', '团队', '合作', '领导', '管理', '技能', '能力', '专业', '经验', '挑战', '机会', '创新', '效率', '质量', '服务', '客户', '价值'],
  '朋友': ['友谊', '友情', '信任', '真诚', '理解', '支持', '帮助', '陪伴', '分享', '交流', '沟通', '倾听', '关心', '关爱', '鼓励', '安慰', '快乐', '开心', '聚会', '活动', '回忆', '美好', '珍贵', '永远', '长久', '深厚', '纯真', '无私', '包容', '宽容'],
  '老师': ['教育', '知识', '智慧', '经验', '指导', '教导', '培养', '启发', '引导', '帮助', '支持', '鼓励', '关爱', '负责', '耐心', '细心', '专业', '能力', '素养', '品德', '榜样', '模范', '尊敬', '感谢', '感恩', '回报', '成长', '成就', '影响', '意义'],
  '学校': ['教育', '学习', '知识', '文化', '成长', '培养', '老师', '学生', '同学', '课堂', '教室', '图书馆', '操场', '活动', '社团', '竞赛', '考试', '成绩', '毕业', '校园', '建筑', '环境', '氛围', '友谊', '回忆', '青春', '美好', '珍贵', '怀念', '传统'],
  '城市': ['繁华', '热闹', '高楼', '建筑', '交通', '人流', '车流', '商业', '购物', '娱乐', '文化', '艺术', '博物馆', '公园', '广场', '街道', '灯光', '夜景', '现代', '发达', '便利', '快节奏', '压力', '机会', '挑战', '梦想', '奋斗', '生活', '工作', '居住'],
  '乡村': ['宁静', '安详', '自然', '田园', '农田', '庄稼', '农民', '朴实', '简单', '纯朴', '清新', '空气', '环境', '生态', '动物', '植物', '花草', '树木', '山水', '风景', '美丽', '传统', '文化', '习俗', '生活', '慢节奏', '放松', '休闲', '回归', '怀念'],
  '科技': ['创新', '发明', '发现', '进步', '发展', '现代', '先进', '高科技', '电脑', '网络', '互联网', '手机', '智能', '人工智能', '机器人', '自动化', '数字化', '信息', '数据', '通信', '交流', '便利', '效率', '速度', '精确', '准确', '可靠', '未来', '变革'],
  '未来': ['明天', '将来', '前景', '展望', '预期', '期待', '希望', '梦想', '目标', '计划', '设想', '想象', '可能', '机会', '挑战', '变化', '发展', '进步', '创新', '科技', '先进', '现代', '智能', '自动', '便利', '美好', '光明', '成功', '实现', '达成']
};

// 检查词汇是否与提示词相关
const checkWordRelevance = (inputWord: string, promptWord: string): { isRelevant: boolean; confidence: number } => {
  const associations = WORD_ASSOCIATIONS[promptWord] || [];
  const input = inputWord.toLowerCase().trim();
  const prompt = promptWord.toLowerCase();
  
  // 直接匹配预设联想词汇
  if (associations.some(word => word.toLowerCase().includes(input) || input.includes(word.toLowerCase()))) {
    return { isRelevant: true, confidence: 0.9 };
  }
  
  // 完全匹配预设联想词汇
  if (associations.some(word => word.toLowerCase() === input)) {
    return { isRelevant: true, confidence: 1.0 };
  }
  
  // 部分匹配（包含相同字符）
  if (associations.some(word => {
    const w = word.toLowerCase();
    return input.length >= 2 && w.length >= 2 && (
      w.includes(input.slice(0, 2)) || input.includes(w.slice(0, 2))
    );
  })) {
    return { isRelevant: true, confidence: 0.6 };
  }
  
  // 与提示词直接相关（包含提示词或提示词包含输入词）
  if (input.includes(prompt) || prompt.includes(input)) {
    return { isRelevant: true, confidence: 0.8 };
  }
  
  // 语义相近检查（扩展的关键字匹配）
  const semanticKeywords: { [key: string]: string[] } = {
    '情感': ['爱', '恨', '喜', '怒', '哀', '乐', '情', '感', '心', '思', '念'],
    '颜色': ['红', '绿', '蓝', '黄', '黑', '白', '紫', '橙', '粉', '灰', '彩', '色'],
    '自然': ['山', '水', '风', '雨', '雪', '云', '天', '地', '花', '草', '树', '林'],
    '时间': ['年', '月', '日', '时', '分', '秒', '早', '晚', '古', '今', '新', '老'],
    '动作': ['跑', '走', '飞', '游', '跳', '爬', '坐', '站', '躺', '睡', '动', '静'],
    '感觉': ['冷', '热', '暖', '凉', '软', '硬', '轻', '重', '香', '臭', '甜', '苦'],
    '大小': ['大', '小', '高', '低', '长', '短', '宽', '窄', '厚', '薄'],
    '方向': ['东', '西', '南', '北', '上', '下', '左', '右', '前', '后'],
    '人物': ['人', '男', '女', '老', '少', '孩', '童', '成', '年', '长'],
    '建筑': ['房', '屋', '楼', '塔', '桥', '路', '街', '城', '乡', '村']
  };
  
  for (const [category, keywords] of Object.entries(semanticKeywords)) {
    const inputHasKeyword = keywords.some(key => input.includes(key));
    const promptHasKeyword = keywords.some(key => prompt.includes(key));
    
    if (inputHasKeyword && promptHasKeyword) {
      return { isRelevant: true, confidence: 0.4 };
    }
  }
  
  // 对于没有预设联想词汇的提示词，降低匹配标准
  if (associations.length === 0) {
    // 检查是否有共同字符
    const commonChars = [...input].filter(char => prompt.includes(char));
    if (commonChars.length >= 1 && input.length >= 2) {
      return { isRelevant: true, confidence: 0.3 };
    }
  }
  
  return { isRelevant: false, confidence: 0 };
};

export function WordAssociationTest({ onComplete }: WordAssociationTestProps) {
  const [stage, setStage] = useState<'instructions' | 'test' | 'results'>('instructions');
  const [currentRound, setCurrentRound] = useState(0);
  const [allWordChains, setAllWordChains] = useState<WordChain[]>([]); // 存储所有轮次的词汇
  const [currentRoundWords, setCurrentRoundWords] = useState<WordChain[]>([]); // 当前轮次词汇
  const [currentInput, setCurrentInput] = useState('');
  const [timeLeft, setTimeLeft] = useState(45); // 每轮45秒
  const [totalScore, setTotalScore] = useState(0);
  const [roundStartTime, setRoundStartTime] = useState(Date.now());
  const [showFeedback, setShowFeedback] = useState(false);
  const [feedbackMessage, setFeedbackMessage] = useState('');
  const [promptWords, setPromptWords] = useState<string[]>([]); // 随机选择的提示词
  
  const inputRef = useRef<HTMLInputElement>(null);
  const timerRef = useRef<NodeJS.Timeout>();

  const MAX_ROUNDS = 5;
  const currentPrompt = promptWords[currentRound] || '';

  // 初始化随机提示词
  useEffect(() => {
    if (promptWords.length === 0) {
      setPromptWords(getRandomPromptWords());
    }
  }, [promptWords.length]);

  useEffect(() => {
    if (stage === 'test') {
      timerRef.current = setInterval(() => {
        setTimeLeft(prev => {
          if (prev <= 1) {
            handleRoundEnd();
            return 0;
          }
          return prev - 1;
        });
      }, 1000);

      // 聚焦输入框
      inputRef.current?.focus();
    }

    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
      }
    };
  }, [stage, currentRound]);

  const calculateWordScore = (word: string, timeTaken: number, isUnique: boolean, promptWord: string): number => {
    // 首先检查相关性
    const relevance = checkWordRelevance(word, promptWord);
    
    // 如果不相关，直接返回0分
    if (!relevance.isRelevant) {
      return 0;
    }
    
    // 基础分数根据相关性置信度调整
    let score = Math.floor(SCORING_CRITERIA.common * relevance.confidence);
    
    // 相关性越高，额外奖励越多
    if (relevance.confidence >= 0.9) {
      score += 10; // 高度相关奖励
    } else if (relevance.confidence >= 0.6) {
      score += 5; // 中度相关奖励
    }
    
    // 创意加分标准更严格
    if (word.length >= 4) score += 3;
    if (word.length >= 6) score += 5;
    
    // 复合词、成语、专业词汇加分
    if (word.includes('的') || word.includes('之') || word.includes('性') || word.includes('化')) {
      score += 5;
    }
    
    // 独特性检查（本轮未重复）
    if (isUnique) {
      score += 5; // 独特词汇加分
    } else {
      return 0; // 重复词汇直接得0分
    }
    
    // 速度加分
    if (timeTaken < 2000) score += SCORING_CRITERIA.timeBonus;
    else if (timeTaken < 5000) score += Math.floor(SCORING_CRITERIA.timeBonus / 2);
    
    return Math.max(0, score);
  };

  const handleWordSubmit = () => {
    if (!currentInput.trim()) return;

    const word = currentInput.trim();
    const timeTaken = Date.now() - roundStartTime;
    
    // 检查当前轮次是否重复
    const isUnique = !currentRoundWords.some(chain => 
      chain.word.toLowerCase() === word.toLowerCase()
    );
    
    // 检查相关性
    const relevance = checkWordRelevance(word, currentPrompt);
    
    const points = calculateWordScore(word, timeTaken, isUnique, currentPrompt);
    
    const newChain: WordChain = {
      id: Date.now(),
      word: word,
      userInput: word,
      points,
      timeTaken,
      round: currentRound + 1,
      prompt: currentPrompt
    };

    // 添加到当前轮次和总列表
    setCurrentRoundWords(prev => [...prev, newChain]);
    setAllWordChains(prev => [...prev, newChain]);
    setTotalScore(prev => prev + points);
    setCurrentInput('');
    setRoundStartTime(Date.now());
    
    // 设置反馈消息
    let message = `+${points}分！`;
    
    if (!isUnique) {
      message = `🔄 重复词汇 +0分`;
    } else if (points === 0) {
      message = `⚠️ 与"${currentPrompt}"无关 +0分`;
    } else if (!relevance.isRelevant) {
      message = `⚠️ 相关性较低 +${points}分`;
    } else if (relevance.confidence >= 0.9) {
      message = `🎯 高度相关 +${points}分！`;
    } else if (timeTaken < 2000) {
      message = `⚡ 反应迅速 +${points}分！`;
    } else if (word.length >= 6) {
      message = `💡 创意词汇 +${points}分！`;
    } else if (relevance.confidence >= 0.6) {
      message = `✅ 相关联想 +${points}分`;
    }
    
    setFeedbackMessage(message);
    setShowFeedback(true);
    setTimeout(() => setShowFeedback(false), 2000); // 延长显示时间方便阅读
  };

  const handleRoundEnd = () => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
    }

    if (currentRound < MAX_ROUNDS - 1) {
      // 下一轮
      setCurrentRound(prev => prev + 1);
      setCurrentRoundWords([]); // 只清空当前轮次词汇
      setTimeLeft(45);
      setRoundStartTime(Date.now());
      setCurrentInput('');
    } else {
      // 测试结束
      setStage('results');
    }
  };

  const handleStartTest = () => {
    // 重新生成随机提示词（确保每次测试都不同）
    setPromptWords(getRandomPromptWords());
    setStage('test');
    setRoundStartTime(Date.now());
  };

  const handleComplete = () => {
    const totalWords = allWordChains.length;
    const averageWordsPerRound = totalWords / MAX_ROUNDS;
    const maxPossibleScore = MAX_ROUNDS * 200; // 每轮最多约200分（假设10个高分词汇）
    const finalScore = Math.min(100, Math.round((totalScore / maxPossibleScore) * 100));
    
    // 计算各轮表现
    const roundPerformance = Array.from({ length: MAX_ROUNDS }, (_, i) => {
      const roundWords = allWordChains.filter(chain => chain.round === i + 1);
      return {
        round: i + 1,
        wordsCount: roundWords.length,
        totalScore: roundWords.reduce((sum, chain) => sum + chain.points, 0),
        prompt: promptWords[i] || ''
      };
    });
    
    const result: TestResult = {
      id: Date.now().toString(),
      testType: 'word-association',
      score: finalScore,
      completedAt: new Date(),
      duration: MAX_ROUNDS * 45, // 总时长
      details: {
        roundsCompleted: MAX_ROUNDS,
        totalWords: totalWords,
        averageWordsPerRound: Math.round(averageWordsPerRound * 10) / 10,
        creativityScore: Math.round((totalScore / maxPossibleScore) * 100),
        totalRawScore: totalScore,
        roundPerformance: roundPerformance,
        allWords: allWordChains.map(chain => ({
          word: chain.word,
          points: chain.points,
          round: chain.round,
          prompt: chain.prompt
        }))
      }
    };

    onComplete(result);
  };

  if (stage === 'instructions') {
    return (
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="max-w-2xl mx-auto"
      >
        <Card className="bg-white/90 backdrop-blur-sm border-pink-200 shadow-lg">
          <CardHeader className="text-center pb-8">
            <div className="w-16 h-16 bg-gradient-to-br from-pink-500 to-rose-500 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
              <MessageCircle className="w-8 h-8 text-white" />
            </div>
            <CardTitle className="text-2xl text-slate-800">词汇联想测试</CardTitle>
            <p className="text-slate-600 mt-2">测试您的语言创造力和联想思维能力</p>
          </CardHeader>
          
          <CardContent className="space-y-6">
            <div className="bg-gradient-to-r from-pink-50 to-rose-50 rounded-xl p-6 border border-pink-100">
              <h3 className="font-semibold text-pink-900 mb-4 flex items-center gap-2">
                <Star className="w-5 h-5" />
                测试说明
              </h3>
              <div className="space-y-3 text-slate-700">
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-pink-500 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">1</span>
                  <p>您将进行5轮词汇联想，每轮会给出一个提示词</p>
                </div>
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-pink-500 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">2</span>
                  <p>请输入与提示词相关的联想词汇，可以多次输入</p>
                </div>
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-pink-500 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">3</span>
                  <p>每轮有45秒时间，创意词汇和快速反应会获得更高分数</p>
                </div>
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-pink-500 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">4</span>
                  <p><strong>重要：</strong>只有与提示词相关的词汇才能得分，无关词汇得0分</p>
                </div>
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-pink-500 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">5</span>
                  <p>评分基于相关性、创意性、联想深度和反应速度</p>
                </div>
              </div>
            </div>

            <div className="grid md:grid-cols-2 gap-4">
              <div className="text-center p-4 bg-gradient-to-br from-pink-50 to-pink-100 rounded-xl border border-pink-200">
                <div className="text-2xl font-bold text-pink-600 mb-1">5</div>
                <div className="text-sm text-pink-700">轮次</div>
              </div>
              <div className="text-center p-4 bg-gradient-to-br from-rose-50 to-rose-100 rounded-xl border border-rose-200">
                <div className="text-2xl font-bold text-rose-600 mb-1">45</div>
                <div className="text-sm text-rose-700">秒/轮</div>
              </div>
            </div>

            <Button 
              onClick={handleStartTest}
              className="w-full bg-gradient-to-r from-pink-500 to-rose-500 hover:from-pink-600 hover:to-rose-600 text-white py-3 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
              size="lg"
            >
              开始测试
            </Button>
          </CardContent>
        </Card>
      </motion.div>
    );
  }

  if (stage === 'test') {
    return (
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        className="max-w-4xl mx-auto space-y-6"
      >
        {/* 顶部状态栏 */}
        <div className="flex flex-col sm:flex-row gap-4 items-center justify-between">
          <div className="flex items-center gap-4">
            <Badge variant="outline" className="bg-pink-100 text-pink-700 border-pink-300">
              第 {currentRound + 1} / {MAX_ROUNDS} 轮
            </Badge>
            <div className="flex items-center gap-2 text-slate-600">
              <Trophy className="w-4 h-4" />
              <span className="font-semibold">{totalScore} 分</span>
            </div>
          </div>
          
          <div className="flex items-center gap-2">
            <Clock className="w-4 h-4 text-slate-500" />
            <span className={`font-mono text-lg font-bold ${timeLeft <= 10 ? 'text-red-500' : 'text-slate-700'}`}>
              {Math.floor(timeLeft / 60)}:{(timeLeft % 60).toString().padStart(2, '0')}
            </span>
          </div>
        </div>

        <Progress value={(45 - timeLeft) / 45 * 100} className="h-2" />

        {/* 测试区域 */}
        <Card className="bg-white/90 backdrop-blur-sm border-pink-200 shadow-lg">
          <CardContent className="p-8">
            <div className="text-center mb-8">
              <div className="text-6xl font-bold bg-gradient-to-r from-pink-500 to-rose-500 bg-clip-text text-transparent mb-4">
                {currentPrompt}
              </div>
              <p className="text-slate-600">请输入与"<span className="font-semibold">{currentPrompt}</span>"相关的联想词汇</p>
              <p className="text-sm text-slate-500 mt-1">💡 提示：输入相关度越高的词汇，得分越高</p>
            </div>

            {/* 输入区域 */}
            <div className="max-w-md mx-auto space-y-4">
              <div className="flex gap-2">
                <Input
                  ref={inputRef}
                  value={currentInput}
                  onChange={(e) => setCurrentInput(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                      handleWordSubmit();
                    }
                  }}
                  placeholder="输入联想词汇..."
                  className="text-lg px-4 py-3 border-pink-300 focus:border-pink-500"
                />
                <Button
                  onClick={handleWordSubmit}
                  disabled={!currentInput.trim()}
                  className="bg-gradient-to-r from-pink-500 to-rose-500 hover:from-pink-600 hover:to-rose-600 px-6"
                >
                  提交
                </Button>
              </div>
            </div>

            {/* 已输入词汇 */}
            {currentRoundWords.length > 0 && (
              <div className="mt-8">
                <h3 className="text-sm font-semibold text-slate-600 mb-4">本轮已输入 ({currentRoundWords.length} 个词汇)：</h3>
                <div className="flex flex-wrap gap-2">
                  <AnimatePresence>
                    {currentRoundWords.map((chain, index) => (
                      <motion.div
                        key={chain.id}
                        initial={{ opacity: 0, scale: 0.8 }}
                        animate={{ opacity: 1, scale: 1 }}
                        className={`border rounded-lg px-3 py-1 text-sm ${
                          chain.points === 0 ? 'bg-gradient-to-r from-red-100 to-red-200 border-red-300' :
                          chain.points > 15 ? 'bg-gradient-to-r from-yellow-100 to-orange-100 border-yellow-300' :
                          chain.points > 10 ? 'bg-gradient-to-r from-pink-100 to-rose-100 border-pink-200' :
                          chain.points > 5 ? 'bg-gradient-to-r from-blue-100 to-blue-200 border-blue-300' :
                          'bg-gradient-to-r from-gray-100 to-gray-200 border-gray-300'
                        }`}
                      >
                        <span className="text-slate-700">{chain.word}</span>
                        <span className={`ml-2 font-semibold ${
                          chain.points === 0 ? 'text-red-600' :
                          chain.points > 15 ? 'text-orange-600' :
                          chain.points > 10 ? 'text-pink-600' :
                          chain.points > 5 ? 'text-blue-600' :
                          'text-gray-600'
                        }`}>+{chain.points}</span>
                      </motion.div>
                    ))}
                  </AnimatePresence>
                </div>
              </div>
            )}
          </CardContent>
        </Card>

        {/* 得分反馈 */}
        <AnimatePresence>
          {showFeedback && (
            <motion.div
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              className="fixed top-20 left-1/2 transform -translate-x-1/2 z-50"
            >
              <Card className={`text-white border-0 shadow-lg ${
                feedbackMessage.includes('+0分') || feedbackMessage.includes('重复词汇') ? 'bg-red-500' :
                feedbackMessage.includes('高度相关') ? 'bg-green-500' :
                feedbackMessage.includes('相关联想') ? 'bg-blue-500' :
                'bg-green-500'
              }`}>
                <CardContent className="py-2 px-4">
                  <div className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4" />
                    <span className="font-semibold">{feedbackMessage}</span>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          )}
        </AnimatePresence>
      </motion.div>
    );
  }

  if (stage === 'results') {
    const totalWords = allWordChains.length;
    const averageWordsPerRound = Math.round(totalWords / MAX_ROUNDS * 10) / 10;
    const maxPossibleScore = MAX_ROUNDS * 200;
    const finalScore = Math.min(100, Math.round((totalScore / maxPossibleScore) * 100));

    return (
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        className="max-w-2xl mx-auto"
      >
        <Card className="bg-white/90 backdrop-blur-sm border-pink-200 shadow-xl">
          <CardHeader className="text-center pb-6">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
              className="w-20 h-20 bg-gradient-to-br from-pink-500 to-rose-500 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg"
            >
              <Trophy className="w-10 h-10 text-white" />
            </motion.div>
            
            <CardTitle className="text-3xl text-slate-800 mb-2">测试完成！</CardTitle>
            <div className="text-6xl font-bold bg-gradient-to-r from-pink-500 to-rose-500 bg-clip-text text-transparent">
              {finalScore}
            </div>
            <p className="text-slate-600">词汇联想能力得分</p>
          </CardHeader>
          
          <CardContent className="space-y-6">
            <div className="grid grid-cols-2 gap-4">
              <div className="text-center p-4 bg-gradient-to-br from-pink-50 to-pink-100 rounded-xl border border-pink-200">
                <div className="text-2xl font-bold text-pink-600 mb-1">{totalWords}</div>
                <div className="text-sm text-pink-700">总词汇数</div>
              </div>
              <div className="text-center p-4 bg-gradient-to-br from-rose-50 to-rose-100 rounded-xl border border-rose-200">
                <div className="text-2xl font-bold text-rose-600 mb-1">{averageWordsPerRound}</div>
                <div className="text-sm text-rose-700">平均词汇/轮</div>
              </div>
            </div>

            <div className="space-y-3">
              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                <span className="text-slate-600">创造力评分</span>
                <span className="font-semibold text-slate-800">{Math.round((totalScore / maxPossibleScore) * 100)}%</span>
              </div>
              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                <span className="text-slate-600">总得分</span>
                <span className="font-semibold text-slate-800">{totalScore} 分</span>
              </div>
              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                <span className="text-slate-600">词汇质量</span>
                <span className="font-semibold text-slate-800">
                  {totalWords > 0 ? Math.round(totalScore / totalWords) : 0} 分/词
                </span>
              </div>
            </div>

            <Button 
              onClick={handleComplete}
              className="w-full bg-gradient-to-r from-pink-500 to-rose-500 hover:from-pink-600 hover:to-rose-600 text-white py-3 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
              size="lg"
            >
              查看详细结果
            </Button>
          </CardContent>
        </Card>
      </motion.div>
    );
  }

  return null;
}